<template>
	<view class="user-card">
		<ShareCanvas ref="shareCanvas" />
		<view class="title">
			<image class="logo" mode="aspectFill" src="/static/logo.png"></image>
			<view class="text">
				<text class="main">{{setting.companyName}}</text>
				<text class="sub">{{setting.companyNameEn}}</text>
			</view>
		</view>
		<swiper v-if="settings.length" indicator-dots circular @change="handleOnCardChange" :style="{height: swiperHeight}">
			<swiper-item :id="`card${i}`" v-for="(s,i) in settings" :key="s.id">
				<ECard v-if="userInfo.id" :user-info="userInfo" :setting="s" />
			</swiper-item>
		</swiper>
		<Comp v-if="settings.length" :setting="setting" />

		<view v-if="!settings.length" style="display: flex;justify-content: center;padding: 40rpx;">
			<text style="color: #ccc;font-size: 24rpx;">尚未配置名片信息</text>
		</view>
	</view>
</template>

<script setup>
	import ShareCanvas from '../../components/share.vue'
	import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
	import ECard from '../../components/ecard.vue'
	import Comp from '../../components/comp.vue'
	import { storeToRefs } from 'pinia';
	import { useUserStore } from '../../store/user';
	import { useECardStore } from '../../store/ecard';
	import { computed, getCurrentInstance, nextTick, ref } from 'vue';
	import { buildShareObject } from '../../utils/share';

	// data
	const shareCanvas = ref() // 分享图片
	const { info: userInfo } = storeToRefs(useUserStore()) // 用户信息
	const { settings, active } = storeToRefs(useECardStore()) // 配置项
	const setting = computed(() => { // 当前配置项
		return settings.value[active.value] || {}
	})
	const swiperHeight = ref('373px') // 轮播高度
	const instance = getCurrentInstance()

	// methods
	const handleOnCardChange = (e) => {
		const { current } = e.detail
		active.value = current
		nextTick(() => {
			computeSwiperHeight()
		})
	}
	const computeSwiperHeight = () => {
		const query = uni.createSelectorQuery().in(instance.proxy)
		query.select(`#card${active.value}`).boundingClientRect(data => {
			const { height = 300 } = data || {}
			swiperHeight.value = `${height+10}px`
		}).exec()
	}

	// lifecircle
	onShow(() => {
		setTimeout(() => {
			computeSwiperHeight()
		}, 500)
	})

	onShareAppMessage(async (res) => {
		if (res.from === 'button') {
			uni.showLoading({ title: '请稍候……' })
			try {
				const user = res.target.dataset.user || {}
				const obj = buildShareObject(setting.value, user)
				const imageUrl = await shareCanvas.value.buildPreviewImage(obj)
				return {
					withShareTicket: true,
					title: `${user.nickname}的名片`,
					path: `/pages/share/share?uid=${user.id}&sid=${setting.value.id}`,
					imageUrl,
				}
			} finally {
				uni.hideLoading()
			}
		} else {
			return {
				title: '中路建设（云南）有限公司',
				path: '/pages/index/index',
				imageUrl: '/static/logo.png'
			}
		}
	})
</script>

<style lang="scss" scoped>
	.user-card {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.title {
		display: flex;
		align-items: center;
		gap: 40rpx;
		padding: 40rpx;
		padding-bottom: 0;

		&>.logo {
			width: 42.5rpx;
			height: 50rpx;
			margin-top: 10rpx;
		}

		&>.text {
			flex: 1;
			display: flex;
			flex-direction: column;

			&>.sub {
				font-size: 20rpx;
				color: #aaaaaa
			}
		}
	}

	:deep(swiper-item) {
		height: auto !important;
	}
</style>